<template>
	<view class="body-view">
		<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
			<view class="menu-topic-view" v-for="(item, index) in tabs" :id="'tabNum' + item.id" :key="index"
				@click="swichMenu(index)">
				<view :class="currentTab == index ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{ item.name }}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list" v-for="(item, index) in swiperDateList" :key="item.id"
				v-show="index === currentTab">
				<view class="swiper-item">
					<pending-item :content="item.content" :tab-id="currentTab"></pending-item>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import API from '../../../api/api.js'
	import PendingItem from './Pending-Item.vue';
	import '../../../common/css/pending.scss'
	export default {
		components: {
			PendingItem,
		},
		data() {
			return {
				scrollLeft: 0,
				tabs: [{
						id: 1,
						name: '我的维修单'
					},
					{
						id: 2,
						name: '待处理'
					},
					{
						id: 3,
						name: '已接单'
					},
					{
						id: 4,
						name: '已完成'
					},
				],
				currentTab: 0,
				swiperDateList: [{
						id: 1,
						content: []
					},
					{
						id: 2,
						content: []
					},
					{
						id: 3,
						content: []
					},
					{
						id: 4,
						content: []
					},
				],
				isRequesting: false, 
				lastSwitchTime: 0, 
				switchInterval: 1000, 
			};
		},
		onLoad(options) {
			if (options.tabId) {
				const tabIndex = this.tabs.findIndex(tab => tab.id === Number(options.tabId));
				if (tabIndex >= 0) {
					this.currentTab = tabIndex;
					this.fetchTabData(tabIndex);
				}
			}
		},
		methods: {
			swichMenu(index) {
				const now = Date.now();
				if (now - this.lastSwitchTime < this.switchInterval) {
					
					uni.showToast({
						title: '请不要频繁切换',
						icon: 'none',
					});
					return;
				}
				this.lastSwitchTime = now; 
				if (this.currentTab === index || this.isRequesting) return; 
				this.currentTab = index;
				this.fetchTabData(index);
				this.scrollLeft = 60 * index;
			},
			async fetchTabData(tabIndex) {
				if (this.isRequesting) return;
				this.isRequesting = true;

				const token = uni.getStorageSync('token');
				const tabId = this.tabs[tabIndex].id;
				let apiCall = null;

				switch (tabId) {
					case 1:
						apiCall = API.getMyRepair(token);
						break;
					case 2:
						apiCall = API.getPending(token);
						break;
					case 3:
						apiCall = API.getAccept(token);
						break;
					case 4:
						apiCall = API.getFinish(token);
						break;
				}

				if (apiCall) {
					try {
						const res = await apiCall;
						if (res.code === 1) {
							this.swiperDateList[tabIndex].content = res.data;
						} else {
							uni.showToast({
								title: '数据加载失败',
								icon: 'none'
							});
						}
					} catch (err) {
						console.error('API 调用失败:', err);
					} finally {
						this.isRequesting = false;
					}
				}
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swichMenu(index);
			},
		},
	};
</script>

<style>

</style>